<template>
  <div>
    <el-row class="gl_searchBox gl_mb_15" :gutter="20">
      <el-col :span="5.5">
        <p style="margin-right:20px">上课时间</p>
        <el-radio-group v-model="tabPosition" size="mini" @change="getdate()">
          <el-radio-button v-for="item in quickDateList" :key="item.code" :label="item.code">{{ item.name }}</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="4.5">
        <p>上课状态</p>
        <!-- <el-button type="text" size="mini" class="date">待上课</el-button>
        <el-button type="text" size="mini" class="date">已上课</el-button> -->
        <el-radio-group v-model="IsFinished" size="mini" @change="check">
          <el-radio-button type="text" label="false">待上课</el-radio-button>
          <el-radio-button type="text" label="true">已上课</el-radio-button>
          <el-radio-button type="text" label="">全部</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :md="3" :lg="4">
        <p>上课课程</p>
        <el-input v-model="Api_GET_ClubCourseScheduleQO.CourseName" placeholder="请输入课程名称" clearable size="mini" @change="getArrangingList()" />
      </el-col>
      <el-col :md="6" :lg="4">
        <el-button type="primary" size="mini" style="margin-left:5px;margin-top:26px" @click="getArrangingList()">筛选</el-button><el-button type="warning" size="mini" style="margin-top:26px" @click="reset()">重置</el-button>
      </el-col>
    </el-row>
    <div style="margin-top:12px;margin-bottom:12px">
      <el-button size="mini" icon="el-icon-circle-plus-outline" type="primary" @click="go()">一键排课</el-button>
      <el-button size="mini" type="danger" @click="close">批量删除</el-button>
    </div>
    <div>
      <el-table ref="tableselect" v-loading="tableLoading" class="gl_table_noBorder" :data="tableData" size="mini" @selection-change="select">
        <el-table-column type="selection" label-class-name="selection" width="55" />
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="上课课程">
          <template slot-scope="{ row }">
            <span>
              {{ row.courseName }}
            </span>
          </template>
        </el-table-column>

        <el-table-column label="上课时间">
          <template slot-scope="{ row }">
            <span>
              {{ row.courseDate | FormatDate('yyyy-MM-dd') }} <span>{{ row.startHour > 9 ? row.startHour+':' : '0'+row.startHour+':' }}</span><span>{{ row.startMinute > 9 ? row.startMinute : '0'+row.startMinute }}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="上课教练" align="center">
          <template slot-scope="{row}">
            <div v-for="coach in row.courseEmployees" :key="coach.id">
              <div v-if="coach.courseEmployeeTypeCode == 'Coach'">
                {{ coach.employee && coach.employee.name }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="上课助教">
          <template slot-scope="{row}">
            <span v-for="coach in row.courseEmployees" :key="coach.id">
              <span v-if="coach.courseEmployeeTypeCode == 'AssistantCoach'">
                {{ coach.employee && coach.employee.name }}
              </span>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="上课教室" prop="classroomName" />
        <el-table-column label="上课状态">
          <template slot-scope="{ row }">
            {{ row.isFinished === true ? '已上课' : '未上课' }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="mini" type="text" @click="edit(row)">编辑</el-button>
            <el-button size="mini" type="text" style="color:#FFBA00" @click="deleteArrang(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubCourseScheduleQO.Page"
        :page-size="Api_GET_ClubCourseScheduleQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
    <CreateDialog ref="createDialog" @refresh="refresh" />
  </div>
</template>

<script>
import CreateDialog from '@/components/Class/createDialog.vue';
import { api_GET_ClubCourseSchedule, api_DELETE_ClubCourseScheduleId, api_DELETE_ClubCourseScheduleList } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubCourseScheduleQO, Api_DELETE_ClubCourseScheduleListQO } from '@/lib/form/hall/swaggerForm';
import { mapActions } from 'vuex';
export default {
  components: {
    CreateDialog
  },
  data() {
    return {
      studentsld: [],
      tableLoading: false,
      currentPage: 1,
      IsFinished: '',
      totalPage: 0,
      gettime: '',
      Api_DELETE_ClubCourseScheduleListQO: new Api_DELETE_ClubCourseScheduleListQO(),
      Api_GET_ClubCourseScheduleQO: new Api_GET_ClubCourseScheduleQO(),
      tabPosition: 'Today',
      quickDateList: [
        {
          code: 'Yesterday',
          name: '昨天'
        },
        {
          code: 'Today',
          name: '今天'
        },
        {
          code: 'Tomorrow',
          name: '明天'
        },
        {
          code: 'Week',
          name: '本周'
        },
        {
          code: 'Month',
          name: '本月'
        },
        {
          code: '',
          name: '全部'
        }
      ],
      tableData: []
    };
  },
  computed: {
    quickDateObj () {
      const _today = new Date();
      const _returnResult = {};
      for (let i = 0; i < this.quickDateList.length; i++) {
        const item = this.quickDateList[i];
        _returnResult[item.code] = this.computeDateTime(item.code, _today);
      }
      return _returnResult;
    }
  },
  created() {
    this.getDict();
    // 获取排课信息
    this.getdate();
  },
  methods: {
    select(val) {
      this.studentsld = [];
      if (val.length > 0) {
        val.forEach(item => {
          this.studentsld.push(item.id);
        });
      }
    },
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    getArrangingList(page) {
      this.$nextTick(() => {
        this.$refs.tableselect.clearSelection();
      });
      this.tableLoading = true;
      this.Api_GET_ClubCourseScheduleQO.Sorting = '';
      this.Api_GET_ClubCourseScheduleQO.Page = page || 1;
      this.Api_GET_ClubCourseScheduleQO.SkipCount = (this.Api_GET_ClubCourseScheduleQO.Page - 1) * this.Api_GET_ClubCourseScheduleQO.MaxResultCount;
      this.Api_GET_ClubCourseScheduleQO.IncludeClass = true; // type: boolean
      this.Api_GET_ClubCourseScheduleQO.IncludeCourse = true; // type: boolean
      this.Api_GET_ClubCourseScheduleQO.IncludeCoach = true; // type: boolean
      this.Api_GET_ClubCourseScheduleQO.IncludeClassroom = true; // type: boolean
      this.Api_GET_ClubCourseScheduleQO.IncludeMessageTemplate = true;
      this.Api_GET_ClubCourseScheduleQO.IsFinished = this.IsFinished ? this.IsFinished : '';
      this.Api_GET_ClubCourseScheduleQO.ClassId = this.$route.query.id;
      console.log(this.Api_GET_ClubCourseScheduleQO);
      api_GET_ClubCourseSchedule(this.Api_GET_ClubCourseScheduleQO).then(res => {
        this.tableData = res.items;
        this.totalPage = res.totalCount;
        this.tableLoading = false;
      }, error => {
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 计算时间
    computeDateTime(code, date) {
      const _dayTime = 86400000; // 一天的时间戳
      const _today = this.getDateData(date);

      if (code === 'Today') {
        // 今天
        return {
          StartDateTime: `${_today.year}-${_today.monthStr}-${_today.dateStr}`,
          EndDateTime: `${_today.year}-${_today.monthStr}-${_today.dateStr}`
        };
      } else if (code === 'Yesterday') {
        // 昨天
        const _yesterdayTime = _today.time - _dayTime;
        const _yesterday = new Date(_yesterdayTime);
        const _yesterdayFormat = this.getDateData(_yesterday);
        return {
          StartDateTime: `${_yesterdayFormat.year}-${_yesterdayFormat.monthStr}-${_yesterdayFormat.dateStr}`,
          EndDateTime: `${_yesterdayFormat.year}-${_yesterdayFormat.monthStr}-${_yesterdayFormat.dateStr}`
        };
      } else if (code === 'Tomorrow') {
        // 明天
        const _yesterdayTime = _today.time + _dayTime;
        const _yesterday = new Date(_yesterdayTime);
        const _yesterdayFormat = this.getDateData(_yesterday);
        return {
          StartDateTime: `${_yesterdayFormat.year}-${_yesterdayFormat.monthStr}-${_yesterdayFormat.dateStr}`,
          EndDateTime: `${_yesterdayFormat.year}-${_yesterdayFormat.monthStr}-${_yesterdayFormat.dateStr}`
        };
      } else if (code === 'Week') {
        // 本周
        const _weekStartDateTime = _today.time - ((_today.day - 1) * _dayTime);
        const _weekStartDate = new Date(_weekStartDateTime);
        const _weekStartDateFormat = this.getDateData(_weekStartDate);

        const _weekEndDateTime = _today.time + ((7 - _today.day) * _dayTime);
        const _weekEndDate = new Date(_weekEndDateTime);
        const _weekEndDateFormat = this.getDateData(_weekEndDate);

        return {
          StartDateTime: `${_weekStartDateFormat.year}-${_weekStartDateFormat.monthStr}-${_weekStartDateFormat.dateStr}`,
          EndDateTime: `${_weekEndDateFormat.year}-${_weekEndDateFormat.monthStr}-${_weekEndDateFormat.dateStr}`
        };
      } else if (code === 'Month') {
        // 本月
        const _monthStartDateTime = _today.time - ((_today.date - 1) * _dayTime);
        const _monthStartDate = new Date(_monthStartDateTime);
        const _monthStartDateFormat = this.getDateData(_monthStartDate);

        const _monthLastDay = new Date(_today.year, _today.month, 0); // 本月最后一天
        const _monthEndDateFormat = this.getDateData(_monthLastDay);

        return {
          StartDateTime: `${_monthStartDateFormat.year}-${_monthStartDateFormat.monthStr}-${_monthStartDateFormat.dateStr}`,
          EndDateTime: `${_monthEndDateFormat.year}-${_monthEndDateFormat.monthStr}-${_monthEndDateFormat.dateStr}`
        };
      } else {
        // 其他情况
        return {
          StartDateTime: '',
          EndDateTime: ''
        };
      }
    },
    // 获取想要的时间数据
    getDateData (date) {
      const _year = date.getFullYear(); // 当前年
      const _month = date.getMonth() + 1; // 当前月
      const _date = date.getDate(); // 当前日
      const _day = date.getDay(); // 当前周几
      const _time = date.getTime(); // 当前时间戳
      const _strMonth = _month <= 9 ? '0' + _month : _month;
      const _strDate = _date <= 9 ? '0' + _date : _date;
      return {
        year: _year,
        month: _month,
        monthStr: _strMonth,
        date: _date,
        dateStr: _strDate,
        day: _day,
        time: _time
      };
    },
    getdate() {
      this.Api_GET_ClubCourseScheduleQO.StartTime = this.quickDateObj[this.tabPosition].StartDateTime;
      this.Api_GET_ClubCourseScheduleQO.EndTime = this.quickDateObj[this.tabPosition].EndDateTime;
      this.getArrangingList();
    },
    check() {
      this.getArrangingList();
    },
    deleteArrang(id) {
      this.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          api_DELETE_ClubCourseScheduleId(id).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getArrangingList(this.Api_GET_ClubCourseScheduleQO.Page);
          }, error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCourseScheduleQO.MaxResultCount = MaxResultCount;
      this.getArrangingList();
    },
    pageIndexChange(currentPage) {
      this.getArrangingList(currentPage);
    },
    edit(row) {
      this.$refs.createDialog.open('编辑', row);
    },
    refresh() {
      this.getArrangingList();
    },
    close() {
      if (this.studentsld.length === 0) {
        this.$message({
          message: '请选择排课信息',
          type: 'warning'
        });
        return;
      }
      this.$confirm(`您确定要删除吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.Api_DELETE_ClubCourseScheduleListQO.ids = this.studentsld;
          api_DELETE_ClubCourseScheduleList(this.Api_DELETE_ClubCourseScheduleListQO).then(res => {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.getArrangingList(this.Api_GET_ClubCourseScheduleQO.Page);
          }, error => {
            const _msg = error.error.message || error.message;
            this.$message({ type: 'error', message: _msg });
          });
        });
    },
    go() {
      this.$router.push({ name: 'Timetable' });
    },
    // 重置QO
    reset () {
      this.Api_GET_ClubCourseScheduleQO = new Api_GET_ClubCourseScheduleQO();
      this.tabPosition = 'Today';
      this.IsFinished = '';
      this.getdate();
    }
  }
};
</script>

<style lang="scss" scoped>
.date {
    color: black;
    opacity: 65%;
}
</style>

